<template>
  <div class="wp-box">
      <div class="MSOPPort">
        <div class="tiptxt">请将雷达MSOP Port端口设置为</div>
        <!-- <el-input class="MSOPPortInp" v-model="MSOPPortValue"></el-input> -->
        <el-select
          v-model="MSOPPortVal"
          size="small"
          style="width: 83px;margin-top: 8px;"
        >
          <el-option
            v-for="item in MSOPPortOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="DIFOPPort">
        <div class="tiptxt">请将雷达DIFOP Port端口设置为</div>
        <!-- <el-input class="DIFOPPortInp" v-model="DIFOPPortValue"></el-input> -->
        <el-select
          v-model="DIFOPPortVal"
          size="small"
          style="width: 83px;margin-top: 8px;"
        >
          <el-option
            v-for="item in DIFOPPortOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="viewAngle">
        <div class="tiptxt">视角场</div>
        <div style="width: 210px;">
          <!-- <el-input class="viewAngleIpt1" type="number" v-model="start" oninput="if(value<0)value=0;if(value>360)value=360"></el-input> -->
          <el-select
          v-model="startAngle"
          size="small"
          style="width: 83px;margin-top: 8px;"
        >
          <el-option
            v-for="item in startAngleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span style="margin-left: 10px;margin-right: 3px;">-</span>
          <!-- <el-input class="viewAngleIpt2" type="number" v-model="end" oninput="if(value<0)value=0;if(value>360)value=360"></el-input> -->
        <el-select
          v-model="endAngle"
          size="small"
          style="width: 83px;margin-top: 8px;"
        >
          <el-option
            v-for="item in endAngleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        </div>
      </div>
      <div class="LadarPPM">
        <div class="tiptxt">请将雷达转速设置为20Hz</div>
        <el-select
          v-model="revolvingSpeedVal"
          size="small"
          style="width: 83px;margin-top: 8px;"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span style="line-height: 47px;position:absolute;right:11px;">rmp/min</span>
      </div>
  </div>
</template>

<script>
import { defineComponent } from "vue"

export default defineComponent({
  name: "",
  components: {},
  data() {
    return {
      startAngle : 0,
      endAngle: 360,
      MSOPPortVal:0,
      DIFOPPortVal:0,
      revolvingSpeedVal:0,
      LIDARConfig: {
        MSOPPortValue:0,
        DIFOPPortValue:0,
        start:0,
        end:0,
        value:'',
      },
      options : [
        {
          value: 600,
          label: 600,
        },
        {
          value: 1200,
          label: 1200,
        },
      ],
      MSOPPortOptions: [
        {
          value: 6698,
          label: 6698,
        },
        {
          value: 6699,
          label: 6699,
        },
        {
          value: 6700,
          label: 6700,
        },
      ],
      DIFOPPortOptions: [
        {
          value: 7787,
          label: 7787,
        },
        {
          value: 7788,
          label: 7788,
        },
        {
          value: 7789,
          label: 7789,
        },
      ],
      startAngleOptions:[
        {
          value: 0,
          label: 0,
        },
        {
          value: 90,
          label: 90,
        },
        {
          value: 180,
          label: 180,
        },
        {
          value: 270,
          label: 270,
        },
      ],
      endAngleOptions:[
        {
          value: 90,
          label: 90,
        },
        {
          value: 180,
          label: 180,
        },
        {
          value: 270,
          label: 270,
        },
        {
          value: 360,
          label: 360,
        }
      ],
    };
  },
  created() {
    this.Echo();
  },
  methods: {
    // 回显方法
    Echo() {
        this.echoData = JSON.parse(sessionStorage.getItem("LIDARList")) || {};
        // console.log('回显LIDARList',this.echoData);
        if(this.echoData != '{}') {
          this.MSOPPortVal = this.echoData.MSOPPortValue
          this.DIFOPPortVal = this.echoData.DIFOPPortValue
          this.startAngle = this.echoData.start
          this.endAngle = this.echoData.end
          this.revolvingSpeedVal = this.echoData.value
        }
    },
    // 数据回传
    Sub() {
      this.LIDARConfig.MSOPPortValue = this.MSOPPortVal
      this.LIDARConfig.DIFOPPortValue = this.DIFOPPortVal
      this.LIDARConfig.start = this.startAngle
      this.LIDARConfig.end = this.endAngle
      this.LIDARConfig.value = this.revolvingSpeedVal
      console.log('this.LIDARConfig',this.LIDARConfig);
      this.$emit("ok", this.LIDARConfig);
    },
  },
});
</script>
<style scoped lang="less">
.MSOPPort {
  display: flex;
  margin-top: 68px;
}
.MSOPPortInp {
  width: 70px;
}
/deep/.MSOPPortInp  > .el-input__inner{
  width: 70px;
  height: 30px;
  border: 1px solid #c0c2cd;
  margin: 10px 0;
  padding: 5px;
  text-align: center
}
.DIFOPPort {
  display: flex;
}
.DIFOPPortInp {
  width: 70px;
}
/deep/.DIFOPPortInp  > .el-input__inner{
  width: 70px;
  height: 30px;
  border: 1px solid #c0c2cd;
  margin: 10px 0;
  padding: 5px;
  text-align: center
}
.tiptxt{
  font-size: 16px;
  line-height: 50px;
  margin-right: 10px;
}
.ipt {
  width: 200px;
  height: 40px;
  outline: none;
  margin-left: 10px;
  margin-bottom: 10px;
}
// /deep/.el-input__inner{
//   width: 150px;
//   height: 30px;
//   border: 1px solid #c0c2cd;
//   margin: 10px 0;
//   padding: 5px;
//   text-align: center
// }
.viewAngle {
  display: flex;
}
.viewAngleIpt1 {
  width: 59px;
}
.viewAngleIpt2 {
  width: 70px;
}
/deep/.viewAngleIpt1 > .el-input__inner{
  width: 56px;
  height: 30px;
  border: 1px solid #c0c2cd;
  margin: 10px 0;
  padding: 5px;
  text-align: center
}
/deep/.viewAngleIpt2 > .el-input__inner{
  width: 70px;
  height: 30px;
  border: 1px solid #c0c2cd;
  margin: 10px 0;
  padding: 5px;
  text-align: center
}
.LadarPPM {
  display: flex;
}
/deep/.LadarPPM > .el-input__inner{
  width: 130px !important;
  height: 30px;
  border: 1px solid #c0c2cd;
  margin: 10px 0;
  padding: 5px;
  text-align: center;
}
/deep/.el-input--small .el-input__inner {
  text-align: center;
}
/deep/.el-input__suffix {
  width: 15px;
  right: 11px;
}
/deep/.el-input__inner {
  width: 90px;
}
</style>